// import React, { Component, Fragment } from 'react';
import React, { Component } from 'react';
// Fragment jsx不会解析为html，但是它能当作 顶级元素  相当于vue中的template
// react提供一种简写 <></>

/* // 高阶组件是一个函数且 参数 是一个首字母要大写的组件
function withCmp(Cmp) {
  // 需要一个类组件且此组件要有返回
  return class HocCmp extends Component {
    // 渲染
    render() {
      // let title = this.props.title+'----...'
      return (
        <>
          <h1>头部</h1>
          {
            // 子组件 通过props传给参数组件
          }
          <Cmp {...this.props}></Cmp>
          <h4>底部</h4>
        </>
      )
    }
  }
  // 需要返回，返回是一个组件
  // return HocCmp
}

export default withCmp */

// 高阶组件是一个函数
export default Cmp => {
  // 匿名类
  return class extends Component {

    // 渲染
    render() {
      return (
        <>
          <h1>头部</h1>
          {
            // 子组件 通过props传给参数组件
          }
          <Cmp {...this.props}></Cmp>
          <h4>底部</h4>
        </>
      )
    }
  }
}